
@import "reset";

$fontSize1 : 37.5;

//1rem = fontSize px
$fontSize : 37.5;
@function px2rem($px){
    @return #{($px / $fontSize)} + rem;
}

@mixin  center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin layout-full{
    position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}


//公用动画

.side-enter,
.side-leave-to {
  transform: scale(0);
}
.side-enter-active,
.side-leave-active {
  transform: scale(0.5);
  transition: all 0.3s linear;
}
.side-enter-to,
.side-leave {
  transform: scale(1);
}
.menu-down-enter,
.menu-down-leave-to{
  transform: translateY(px2rem(-120));
}
.menu-up-enter,
.menu-up-leave-to{
  transform: translateY(px2rem(120));
}
.menu-down-enter-active,
.menu-down-leave-active,
.menu-up-enter-active,
.menu-up-leave-active{
  transition: all .3s linear;
}
.menu-down-enter-to,
.menu-down-leave,
.menu-up-enter-to,
.menu-up-leave{
  transform: translateY(0);
}
